<template>
  <div class="tags">
    <div class="title">
      <div class="top">
        <SvgIcon name="tag" class="svg" />
        <h3>标签目录</h3>
      </div>
      <div class="line"></div>
    </div>
    <div class="tag-cloud">
      <TagCloud v-if="showTagCloud" :tags="data.tagsList"></TagCloud>
    </div>
  </div>
</template>

<script setup lang="ts">
import { _getTags } from '@/pages/index/index.service.ts';
import { nextTick, onMounted, reactive, ref } from 'vue';
import TagCloud from '@/components/TagCloud.vue';

const data = reactive({
  tagsList: [] as any[]
});

const showTagCloud = ref(false);

onMounted(() => {
  getData();
});

function getData() {
  _getTags().then((res) => {
    data.tagsList = res.data.map((i) => {
      return {
        name: i.tagName,
        color: i.randomColor
      };
    });
    nextTick(() => {
      showTagCloud.value = false;
      nextTick(() => {
        showTagCloud.value = true;
      });
    });
  });
}
</script>

<style scoped lang="less">
.tags {
  width: 100%;
  height: 300px;

  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

  border-radius: 20px;

  position: relative;
  background-color: var(--background-secondary);
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .tag-cloud {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex: 1;
    padding: 10px;
  }

  .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .top {
      display: flex;
      align-items: center;

      .svg {
        width: 20px;
        height: 20px;
      }

      h3 {
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }

    .line {
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      width: 60px;
      height: 4px;
      border-radius: 100000px;
    }
  }
}
</style>
